<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>滑动条私有样式</title>
	<style>
		input{
			/*改变元素的浏览器默认风格*/
			-webkit-appearance: none;
			-moz-appearance: none;
			width: 100%;
			margin: 0;
			cursor: pointer;
		}
		input:focus{
			/*获取焦点时去除外边框线*/
			outline: none;
		}
		
		/*谷歌浏览器*/
		/*设置滑动条的运动轨迹*/
		/*track轨道*/
		input::-webkit-slider-runnable-track{
			height: 4px;
			background-color: green;
		}
		/*这是拖动按钮的样式*/
		/*thumb拇指*/
		input::-webkit-slider-thumb{
			-webkit-appearance: none;
			height: 20px;
			width: 20px;
			border: 2px solid green;
			border-radius: 50%;
			background-color: lightgreen;
			margin-top: -8px;
		}
		/*鼠标经过时的样式*/
		input::-webkit-slider-runnable-track:hover,
		input::-webkit-slider-thumb:hover {   
			background-color: red;   
		} 
		
		/*火狐浏览器*/
		input::-moz-range-track{
			height: 4px;
			background-color: green;
		}
		input::-moz-range-thumb{
			height: 20px;
			width: 20px;
			border: 2px solid green;
			border-radius: 50%;
			background-color: lightgreen;
			margin-top: -8px;
		}
		
		
		/*IE浏览器伪元素相对复杂些：*/
		/*拖动轨道*/
		input::-ms-track { 
			height: 4px;
			background-color: green;  
		}   
		/*中间拖动的块块*/
		input[type=range]::-ms-thumb {   
			height: 20px;
			width: 20px;
			border: 2px solid green;
			border-radius: 50%;
			background-color: lightgreen;
			margin-top: -8px;  
		} 
		/*已经拖拽的区域*/
		input::-ms-fill-lower {   
			background: red;   
			border: 0.2px solid #000;   
			border-radius: 1px;   
		}
		/*还没有拖拽的区域*/
		input[type=range]::-ms-fill-upper {   
			background: #3071a9;   
			border: 0.2px solid #666;   
			border-radius: 1px;   
		}   
		input::-ms-ticks-after{
			display: block;
			background-color: red;
		}
		input::-ms-ticks-before{
			display: block;
			background-color: blue;
		}
		input[type=range]:focus::-ms-fill-lower {   
			background: red;   
		}   
		input[type=range]:focus::-ms-fill-upper {   
			background: blue;   
		}  
</style>
</head>
<body>
	<input type="range" value="20" onchange="console.log(this.value)">
</body>
</html>